handlebars踩坑之旅

1. each的使用方法(遍历数组或者对象)

    {{include "tpl/components/page3-school-slide/each-slide"
      data='[
          { 
            "name": "badao", 
            "word": "刀"
          }, {
            "name": "changge",
            "word": "歌"
          }, {
            "name": "cangyun",
            "word": "云"
          }
      ]'
        
    }}
      

    {{#each data}}
      <div class="swiper-slide school-slide">
        {{include "tpl/components/page3-school-slide/index"
                  name=this.name
                  word=this.word
        }}
      </div>
    {{/each}}
    
    
    {{#each data}}
      <li class="{{../ns}}-tab-li"
      data-index={{@index}}     //数组遍历时索引值为 {{@index}}, 对象为{{@key}} 
      data-img="assets/images/page_exterior/tab/{{this.name}}.jpg" data-name="{{this.name}}">
        <img src="assets/images/page_exterior/tab/s/{{this.name}}.jpg" alt="">
     </li>
    {{/each}}

2. 判断是否有传参, 有的话使用传参的值, 没有的话使用默认值

    {{#unless ns}}
        {{var ns = 'xxx'}}
    {{/unless}}

3. if else 判断

    {{#if list}}
    <ul id="list">  
        {{#each list}}
            <li>{{this.name}}</li>
        {{/each}}
    </ul>  
    {{else}}
        <p>{{error}}</p>
    {{/if}}
    
    
    
    //对应适用json数据
    var data = {  
        info:['HTML5','CSS3',"WebGL"],
        "error":"数据取出错误"
    }
    
    这里{{#if}}判断是否存在list数组，如果存在则遍历list，如果不存在输出错误信息

4. each 判断是否是第一个或者是最后一个

    
    
    {{#each list}}
        ```
        {{#if @first}}  //{{#if @last}}
          ```
        {{else}}
         ```
        {{/if}}
        ```
    {{/each}}
    
    {{#each list}}
      <li class="page6-homepage-nav-li">
        <div class="page6-homepage-li-box">
          <div class="page6-homepage-playing-method-box">
            <div class="page6-homepage-method-img-box">
              <img src="assets/images/page6/homepage/img-{{this.method-type}}.png" alt="">
            </div>
            {{#if @first}}
              <div class="page6-homepage-method-nav-btn active" data-index="{{this.index}}">{{this.method-type-text}}</div>
            {{else}}
              <div class="page6-homepage-method-nav-btn" data-index="{{this.index}}">{{this.method-type-text}}</div>
            {{/if}}
            <p class="page6-homepage-method-introduce">{{this.method-type-introduce}}</p>
          </div>
        </div>
      </li>
    {{/each}}

1. 遍历时给指定的某个值进行特殊处理(使用比较方法)

{{#compare  name "==" "changge"}}
  do something
{{else}}
  do something else
{{/compare}}

{{#each data}}
  {{#compare this.num "==" 1}}
    <li class="tab-li active" data-img="assets/images/page_exterior/tab/{{this.num}}.jpg" data-name="{{this.name}}">
      <img src="assets/images/page_exterior/tab/s/{{this.num}}.jpg" alt="">
    </li>
  {{else}}
    <li class="tab-li" data-img="assets/images/page_exterior/tab/{{this.num}}.jpg" data-name="{{this.name}}">
      <img src="assets/images/page_exterior/tab/s/{{this.num}}.jpg" alt="">
    </li>
  {{/compare}}
{{/each}}

1. content block 内容嵌套

// 外层
{{var ns = "layout-wrapper"}}
{{#extend "tpl/layouts/base-layout" }}
    {{#block "body"}}
      <!--页面正文从这里开始-->
    {{/block}}
{{/extend}}


// 内层:
{{#extend "tpl/layouts/index" title="标题"}}
  {{#content "body"}}
    {{var ns = "index"}}
    <style class="inline" type="text/less">

    </style>
    {{include "tpl/components/swiper/index"}}
    <div>插入的页面内容</div> 
  {{/content}}
{{/extend}}